// import React from 'react'
// import HomeCss from './home.module.css'
// import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
// import ButItem from '../ButtonPage/But.jsx'
// export default function Home() {
// 	const navgiate = useNavigate()
// 	const loacation = useNavigate()
// 	const jump = (i) => {
// 		navgiate(i)
// 	}
// 	return (
// 		<div>
// 			<div className={HomeCss.main}>
// 				<header className={HomeCss.HeaderTop}>
// 					<p>
// 						<img src="http://www.mxswch.cn/upload/20220818/f3c1af9f896c960b590ea175ed230d2e.png" alt="" style={{ marginTop: '1.5vh' }} />
// 					</p>
// 				</header>
// 				<header className={HomeCss.Header}>
// 					<div onClick={()=>{navgiate('/')}}>铭信首页</div>
// 					<div onClick={()=>{navgiate('/')}}>关于我们</div>
// 					<div onClick={()=>{navgiate('/')}}>工商服务</div>
// 					<div onClick={()=>{navgiate('/')}}>代理记账</div>
// 					<div onClick={()=>{navgiate('/')}}>税务代办</div>
// 					<div onClick={()=>{navgiate('/')}}>公司审计</div>
// 					<div onClick={()=>{navgiate('/')}}>税务顾问</div>
// 					<div onClick={()=>{navgiate('/')}}>税务筹划</div>
// 					<div onClick={()=>{navgiate('/')}}>产权资质</div>
// 					<div onClick={()=>{navgiate('/')}}>教育培训</div>
// 				</header>
// 				<main className={HomeCss.mains}>

// 				</main>
// 				<div>
// 					<ButItem/>
// 				</div>
// 			</div>
// 		</div>
// 	)
// }



import React from 'react';
import HomeCss from './home.module.css';
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from'react-router-dom';
import ButItem from '../ButtonPage/But.jsx';
// 导入react-slick相关模块
import Slider from'react-slick';
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

export default function Home() {
    const navgiate = useNavigate();
    const loacation = useNavigate();
    const jump = (i) => {
        navgiate(i);
    };

    const settings = {
        dots: true, // 显示指示点，方便用户知晓轮播图的页数及当前位置
        infinite: true, // 实现无限循环播放
        speed: 450, // 切换幻灯片的速度，单位是毫秒
        slidesToShow: 1, // 同时显示的幻灯片数量为1张
        slidesToScroll: 1, // 每次滚动切换1张幻灯片
        autoplay: true, // 开启自动播放功能
        autoplaySpeed: 2000, // 自动播放的间隔时间，单位为毫秒
        variableWidth: true, // 让幻灯片宽度自适应内容，便于自适应布局
    };

    return (
        <div>
            <div className={HomeCss.main}>
                <header className={HomeCss.HeaderTop}>
                    <p>
                        <img src="http://www.mxswch.cn/upload/20220818/f3c1af9f896c960b590ea175ed230d2e.png" alt="" style={{ marginTop: '1.5vh' }} />
                    </p>
                </header>
                <header className={HomeCss.Header}>
                    <div onClick={() => { navgiate('/') }}>铭信首页</div>
                    <div onClick={() => { navgiate('/') }}>关于我们</div>
                    <div onClick={() => { navgiate('/') }}>工商服务</div>
                    <div onClick={() => { navgiate('/') }}>代理记账</div>
                    <div onClick={() => { navgiate('/') }}>税务代办</div>
                    <div onClick={() => { navgiate('/') }}>公司审计</div>
                    <div onClick={() => { navgiate('/') }}>税务顾问</div>
                    <div onClick={() => { navgiate('/') }}>税务筹划</div>
                    <div onClick={() => { navgiate('/') }}>产权资质</div>
                    <div onClick={() => { navgiate('/') }}>教育培训</div>
                </header>
                <main className={HomeCss.mains}>
                    {/* 轮播图部分 */}
                    <Slider {...settings}>
                         <div>
                             <img src="http://www.mxswch.cn/upload/20220818/9103ca67ac7ebb12df631bc2af1bf2be.jpg" alt="" />
                        </div>
                         <div>
                             <img src="http://www.mxswch.cn/upload/20220818/f13fde4c46aaa6fde85d8dd72852602c.jpg" alt="" />
                         </div>
                         <div>
                             <img src="http://www.mxswch.cn/upload/20220818/cc051905cbad8694bbf045008d689d52.jpg" alt="" />
                         </div>
                     </Slider>
                </main>
                <div>
                    <ButItem />
                </div>
            </div>
        </div>
    );
}